* {
    margin: 0;
    padding: 0;
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background-color: #353b48;
}

.container {
    display: flex;
    flex-direction: column;
}

.container a {
    text-decoration: none;
    position: relative;
    width: 200px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    margin: 20px;
    border: 5px solid #7f8;
    font-size: 30px;
    color: #7f8;
    /* 设置四个盒子的颜色 */
    /* 刚才定义的 --i 这个属性值可以通过 var函数 来调用 */
    /* hue-rotate: 颜色滤镜，可以添加不同的度数来改变颜色，最大值为 360deg，最小为 0deg */
    filter: hue-rotate(calc(var(--i) * 90deg));
}

.container a::before, .container a::after {
    content: "";
    position: absolute;
    width: 15px;
    height: 5px;
    background-color: #353b48;
    /* 这个属性是倾斜，写了一个值就表示在水平方向的倾斜，和skewX 是一样的 */
    transform: skew(50deg);
    /* 设置过渡 */
    transition: all .5s;
}


.container a::before {
    top: -5px;
    left: 10%;
}

.container a::after {
    bottom: -5px;
    right: 10%;
}

.container a:hover::before {
    left: 80%;
}

.container a:hover::after {
    right: 80%;
}
